<template>
  <div class="link-card-opus" @click="handleClick">
    <div class="link-card-opus__detail">
      <div class="link-card-opus__title fs-medium bili-ellipsis">
        {{ props.data.title }}
      </div>
      <div class="link-card-opus__subtitle fs-small">
        <!-- 图标 -->
        <span>{{ subtitle }}</span>
      </div>
    </div>
    <div class="link-card-opus__cover">
      <img :src="props.data.cover" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { LINKCARD_CARD_OPUS } from '../util'
const props = withDefaults(
  defineProps<{
    data: LINKCARD_CARD_OPUS
    dynid?: string
  }>(),
  { data: () => ({}) }
)
const subtitle = computed(() => {
  const { author, stat } = props.data
  return `${author?.name} · ${stat?.view}阅读`
})
const handleClick = () => {
  window.open(props.data.jump_url)
}
</script>
<style lang="scss" scoped></style>
